<template>
  <div class="lianxi_box">
    <m-header modile-title="练习9" go-back="true"></m-header>
    <div class="image-view">
      <div class="view">
        <div class="item" v-for="(item, index) in imgBase64">
          <span class="cancel-btn" @click="delImg(index)">x</span>
          <img :src="item">
        </div>
      </div>
      <div class="addbox">
        <input type="file" @change="getImgBase()" multiple>
        <div class="addbtn">+</div>
      </div>
    </div>
    <!--限制图片大小-->
    <pub-img></pub-img>
    <div class="jq_box">

    </div>
  </div>
</template>
<style lang="scss">
  * {
    margin: 0 auto;
    padding: 0;
    font-family: "微软雅黑";
  }

  .clearboth::after {
    content: "";
    display: block;
    clear: both;
  }

  .lianxi_box {
    padding-top: 60px;
    .image-view {
      width: 400px;
      height: 300px;
      margin: 50px auto;
      .addbox {
        float: left;
        position: relative;
        height: 100px;
        width: 100px;
        margin-bottom: 20px;
        text-align: center;
        input {
          position: absolute;
          left: 0;
          height: 100px;
          width: 100px;
          opacity: 0;
        }
        .addbtn {
          float: left;
          height: 100px;
          width: 100px;
          line-height: 100px;
          color: #fff;
          font-size: 40px;
          background: #ccc;
          border-radius: 10px;
        }
      }
      .view {
        clear: both;
        .item {
          position: relative;
          float: left;
          height: 100px;
          width: 100px;
          margin: 10px 10px 0 0;
          .cancel-btn {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 20px;
            height: 20px;
            color: #fff;
            line-height: 20px;
            text-align: center;
            background: red;
            border-radius: 10px;
            cursor: pointer;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .jq_box {
      width: 100%;
      margin-top: 50px;
    }
  }

</style>
<script>
  import mHeader from '../../../../components/header'
  import pubImg from '../../../../components/publish1'

  export default {
    data() {
      return {
        imgBase64: []    //存储img base64的值将值传给后端处理
      }
    },
    mounted(){},
    methods: {
      getImgBase() {
        var _this = this;
        var event = event || window.event;
        var file = event.target.files[0];
        console.log(file.size)
        if (file.size > 2097152) {
          console.log('请上传小于2M的图片')
          return;
        }
        // for (var i = 0; i < file.length; i++) {
        //   console.log(file[i])
        //   // if (files[i].size / 1024 / 1024 > 2) {
        //   //   console.log('第' + (i + 1) + '张图片大于2M,请上传小于2M的图片');
        //   //   return;
        //   // }
        // }
        var reader = new FileReader();
        //转base64
        reader.onload = function (e) {
          _this.imgBase64.push(e.target.result);
        }
        reader.readAsDataURL(file);
      },
      //删除图片
      delImg(index) {
        this.imgBase64.splice(index, 1);
      },
    },
    components: {
      mHeader,
      pubImg
    }
  }
</script>
